<template>
    <div class="login_container">
        <el-dialog v-model="userStore.visible" title="用户登录">
            <div class="content">
                <el-row>
                    <el-col :span="12">
                        <div class="loginint">
                            <!-- 手机号码登录 -->
                            <div v-show="scene == 0">
                                <el-form style="width: 90%;margin: 20px auto;">
                                    <el-form-item>
                                        <el-input placeholder="请输入手机号码" :prefix-icon="User" v-model="loginParam.phone"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-input placeholder="请输入手机验证码" :prefix-icon="Lock" disabled></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button @click="getCode">获取验证码</el-button>
                                    </el-form-item>
                                </el-form>
                                <el-button type="primary" style="width: 90%;margin-left: 5%;">用户登录</el-button>
                                <div class="bottom" @click="changeScene">
                                    <p>微信扫码登录</p>
                                    <svg t="1715147838271" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="3804" width="32" height="32">
                                        <path
                                            d="M352.814545 385.396364m-33.512727 0a33.512727 33.512727 0 1 0 67.025455 0 33.512727 33.512727 0 1 0-67.025455 0Z"
                                            fill="#d81e06" p-id="3805"></path>
                                        <path
                                            d="M502.690909 384.465455m-33.512727 0a33.512727 33.512727 0 1 0 67.025454 0 33.512727 33.512727 0 1 0-67.025454 0Z"
                                            fill="#d81e06" p-id="3806"></path>
                                        <path
                                            d="M576.232727 534.341818m-23.272727 0a23.272727 23.272727 0 1 0 46.545455 0 23.272727 23.272727 0 1 0-46.545455 0Z"
                                            fill="#d81e06" p-id="3807"></path>
                                        <path
                                            d="M694.458182 536.203636m-23.272727 0a23.272727 23.272727 0 1 0 46.545454 0 23.272727 23.272727 0 1 0-46.545454 0Z"
                                            fill="#d81e06" p-id="3808"></path>
                                        <path
                                            d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m-87.505455 630.225455c-26.996364 0-48.407273-5.585455-75.403636-11.17091l-75.403636 37.236364 21.410909-64.232727c-53.992727-37.236364-85.643636-85.643636-85.643637-145.221818 0-102.4 96.814545-182.458182 215.04-182.458182 105.192727 0 198.283636 64.232727 216.901819 150.807273-6.516364-0.930909-13.963636-0.930909-20.48-0.93091-102.4 0-182.458182 76.334545-182.458182 170.356364 0 15.825455 2.792727 30.72 6.516363 44.683636-7.447273 0-13.963636 0.930909-20.48 0.93091z m314.647273 75.403636l15.825455 53.992727-58.647273-32.581818c-21.410909 5.585455-42.821818 11.170909-64.232727 11.170909-102.4 0-182.458182-69.818182-182.458182-155.461818s80.058182-155.461818 182.458182-155.461818c96.814545 0 182.458182 69.818182 182.458182 155.461818 0 47.476364-31.650909 90.298182-75.403637 122.88z"
                                            fill="#d81e06" p-id="3809"></path>
                                    </svg>
                                </div>
                            </div>
                            <div v-show="scene == 1">
                                <!-- 微信扫码登录 -->
                                <div class="webchat">
                                    12345678
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="rightCon">
                            <div class="top">
                                <div class="item">
                                    <img src="@/assets/images/code_app.png" alt="">
                                    <svg t="1715147838271" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="3804" width="16" height="16">
                                        <path
                                            d="M352.814545 385.396364m-33.512727 0a33.512727 33.512727 0 1 0 67.025455 0 33.512727 33.512727 0 1 0-67.025455 0Z"
                                            fill="#cdcdcd" p-id="3805"></path>
                                        <path
                                            d="M502.690909 384.465455m-33.512727 0a33.512727 33.512727 0 1 0 67.025454 0 33.512727 33.512727 0 1 0-67.025454 0Z"
                                            fill="#cdcdcd" p-id="3806"></path>
                                        <path
                                            d="M576.232727 534.341818m-23.272727 0a23.272727 23.272727 0 1 0 46.545455 0 23.272727 23.272727 0 1 0-46.545455 0Z"
                                            fill="#cdcdcd" p-id="3807"></path>
                                        <path
                                            d="M694.458182 536.203636m-23.272727 0a23.272727 23.272727 0 1 0 46.545454 0 23.272727 23.272727 0 1 0-46.545454 0Z"
                                            fill="#cdcdcd" p-id="3808"></path>
                                        <path
                                            d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m-87.505455 630.225455c-26.996364 0-48.407273-5.585455-75.403636-11.17091l-75.403636 37.236364 21.410909-64.232727c-53.992727-37.236364-85.643636-85.643636-85.643637-145.221818 0-102.4 96.814545-182.458182 215.04-182.458182 105.192727 0 198.283636 64.232727 216.901819 150.807273-6.516364-0.930909-13.963636-0.930909-20.48-0.93091-102.4 0-182.458182 76.334545-182.458182 170.356364 0 15.825455 2.792727 30.72 6.516363 44.683636-7.447273 0-13.963636 0.930909-20.48 0.93091z m314.647273 75.403636l15.825455 53.992727-58.647273-32.581818c-21.410909 5.585455-42.821818 11.170909-64.232727 11.170909-102.4 0-182.458182-69.818182-182.458182-155.461818s80.058182-155.461818 182.458182-155.461818c96.814545 0 182.458182 69.818182 182.458182 155.461818 0 47.476364-31.650909 90.298182-75.403637 122.88z"
                                            fill="#cdcdcd" p-id="3809"></path>
                                    </svg>
                                    <p>微信扫一扫关注</p>
                                    <p>"快速预约挂号"</p>
                                </div>
                                <div class="item">
                                    <img src="@/assets/images/code_login_wechat.png" alt="">
                                    <svg t="1715151734222" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="5276" width="16" height="16">
                                        <path
                                            d="M657.4 6.6H369.6c-69.7 0-130 32.1-130 106.4v784.5c0 69.7 55.8 123.7 130 123.7h287.9c74.3 0 129.9-60.4 129.9-134.6V106.7c0-69.6-55.7-100.1-130-100.1z m-135 16.5c4.8 0 8.8 4 8.8 8.8 0 4.8-4 8.8-8.8 8.8-4.9 0-8.8-4-8.8-8.8 0-4.9 4-8.8 8.8-8.8z m-44.8 47.2c0-5.1 4.2-9.3 9.3-9.3h75.7c5.1 0 9.3 4.2 9.3 9.3v0.7c0 5.1-4.2 9.3-9.3 9.3h-75.7c-5.1 0-9.3-4.2-9.3-9.3v-0.7zM449 62.1c4.9 0 8.8 4 8.8 8.8 0 4.9-3.9 8.8-8.8 8.8s-8.8-4-8.8-8.8c0-4.9 4-8.8 8.8-8.8z m64.6 926.1c-24.1 0-43.6-19.6-43.6-43.6 0-24.1 19.6-43.6 43.6-43.6 24.1 0 43.6 19.6 43.6 43.6 0.1 23.9-19.5 43.6-43.6 43.6z m229-129c0 7-5.8 12.8-12.9 12.8H297.5c-7.1 0-12.9-5.8-12.9-12.9v-734c0-7.1 5.8-12.9 12.9-12.9h432.2c7.1 0 12.9 5.8 12.9 12.9v734.1z"
                                            fill="#cdcdcd" p-id="5277"></path>
                                    </svg>
                                    <p>扫一扫下载</p>
                                    <p>"预约挂号"APP</p>
                                </div>

                            </div>
                            <p class="tip">官方指定平台</p>
                            <p class="tip">快速挂号 安全放心</p>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <template #footer>
                <el-button type="info" size="default" @click="">关闭窗口</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
//获取user仓库数据
import useUserStore from '@/store/modules/user';
let userStore = useUserStore();
let scene = ref<number>(0);//0 =>号码登录，1 => 微信扫码登录
//收集表单数据(手机号码)
let loginParam = reactive({
    phone:''
})
const changeScene = ()=>{
    if(scene.value == 0){
        scene.value = 1
    }else{
        scene.value = 0
    }
}
</script>
<script lang="ts">
export default {
    name: 'Login'
}
</script>
<style scoped lang='scss'>
.login_container {
    ::v-deep(.el-dialog__body) {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding-bottom: 20px;
    }

    .loginint {
        width: 100%;
        margin-top: 20px;
        border: 1px solid #ccc;
    }

    .bottom {
        display: flex;
        flex-direction: column;
        align-items: center;

        p {
            margin: 10px auto;
        }

        padding-bottom: 20px;
    }

    .rightCon {
        width: 90%;
        margin: 20px auto;

        .top {
            display: flex;
            justify-content: space-between;

            .item {
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    width: 130px;
                    height: 130px;
                }

                p {
                    margin: 5px 0;
                }
            }
        }

        .tip {
            text-align: center;
            margin: 20px 0;
            font-size: 20px;
            font-weight: 900;
        }
    }
}
</style>